<template>
  <div>
      <!-- 顶部 -->
      <section class="user-info">
    		<div class="header-bar">
    			<router-link to="/index" class="goback">
    				<img src="../../images/mine/goBack.png">
    			</router-link>
    		</div>
    		<img src="../../images/mine/backgroundv3.png" alt="bg" width="100%">
    		<div class="user-box">
    			<div class="no-login">
    				<p>hi,欢迎来到花礼网</p>
    				<router-link to="/login" class="login-btn">登录/注册</router-link>
    			</div>
    		</div>
    	</section>
      <!-- 导航部分 -->
        <div class="top-bar clearfix" >
            <ul>
                <li>
                    <router-link to="/index">
                        <img src="../../images/mine/iconPcObligation@2x.png">
                        <p>代付款</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/index">
                        <img src="../../images/mine/iconPcExpress@2x.png">
                        <p>今日配送</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/index">
                        <img src="../../images/mine/iconPcEvaluate@2x.png">
                        <p>待评价</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/index">
                        <img src="../../images/mine/iconPcAllOrder@2x.png">
                        <p>全部订单</p>
                    </router-link>
                </li>
            </ul>        
        </div>
        <!-- 详情部分 -->
         <div class="link-box clearfix" style="margin-top: 8px;">
            <ul>
                <li>
                    <router-link to="/index">
                        <img src="../../images/mine/iconPcTicket@2x.png">
                        <p>优惠券</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/index">
                        <img src="../../images/mine/iconPcIntegral@2x.png">
                        <p>积分</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/index">
                        <img src="../../images/mine/iconClock@2x.png">
                        <p>生日/纪念日提醒</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/index">
                        <img src="../../images/mine/iconCollectDefault@2x.png">
                        <p>我的收藏</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/index">
                        <img src="../../images/mine/iconPcPay@2x.png">
                        <p>在线支付</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/index">
                        <img src="../../images/mine/bottomIconSeviceDefault@2x.png">
                        <p>联系客服</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/index">
                        <img src="../../images/mine/iconHelp@2x.png">
                        <p>帮助</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/index">
                        <img src="../../images/mine/iconAbout@2x.png">
                        <p>关于花礼</p>
                    </router-link>
                </li>
            </ul>
        </div>
        <!-- 地址管理 -->
        <div class="account">
            <span>账户管理</span>
            <router-link to="/index">
                <p>管理收货地址等</p>
            </router-link>
        </div>
        <!-- banner图 -->
        <div class="banner-maidian">
            <router-link to="/index">
                <img src="../../images/mine/banner@2x.png">
            </router-link>
        </div>
      <!-- 底部 -->
      <footers></footers>
     <!-- <footer>
         <ul class="f_ul">
           <li>
             <router-link to="/index"> 
               <img src="../../images/mine/home_icon_new.png" alt="">
               <p>首页</p>
             </router-link>
           </li>
           <li>
             <router-link to="/sort">
               <img class="aaa" src="../../images/mine/classify_icon_new.png" alt="">
               <p>分类</p>
             </router-link>
           </li>
           <li>
             <router-link to="/shopping">
               <img src="../../images/mine/cart_icon_new.png" alt="">
               <p>购物车</p>
             </router-link>
           </li>
           <li>
             <router-link to="/mine">
               <img src="../../images/mine/my_icon_click_new.png" alt="">
               <p class="f_active">我的</p>
             </router-link>
           </li>
         </ul>
     </footer> -->
  </div>
</template>

<script>
import footers from '../tabbar/footer.vue'
 export default {
  data() {
    return {};
  },
  methods: {
  },
  components: {
      footers
  }
}; 
</script>
<style lang="less" scoped>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, img, dd, dt, dl, input, textarea
{
	margin: 0;
	padding: 0;
	border: none;
} 
body {
  background: #F0EFED;
  color: #494949; 
}
a {
	text-decoration: none;
	color: #666;
}
/* 顶部 */
.user-info {
  width: 100%;
  /* max-width:750px; */
  margin: 0 auto;
  position: relative;
  display: block;
}

.header-bar {
  width: 100%;
  height: 44px;
  position: absolute;
  top: 0;
}
.header-bar .goback {
  display: inline-block;
  padding: 10px 5px 5px 14px;
  font-size: 16px;
}
.user-info .user-box {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 30%;
  left: 0;
}
.no-login {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
}
.no-login p {
  font-size: 24px;
  color: #fff;
}
.login-btn {
  width: 100px;
  height: 24px;
  line-height: 24px;
  font-size: 18px;
  border-radius: 12px;
  display: inline-block;
  background-color: #fe6600;
  color: #fff;
  text-decoration: none;
  margin-top: 5px;
}
div .top-bar {
	margin-bottom: 1px;
}
.top-bar {
	background-color: #fff;
	width: 100%;
	margin: 0 auto;
}
ul, li, i {
	list-style-type: none;
    list-style-position: outside;
    list-style-image: none;
	margin: 0;
	padding: 0;
	font-style: normal;
	display: block;
}
.top-bar ul>li {
	width: 25%;
	float: left;
	padding: 15px 0;
	text-align: center;
	position: relative;
	box-sizing: border-box;
}
.top-bar ul>li p {
	font-size: 12px;
	line-height: 12px;
}
.top-bar ul>li img {
	width: 32px;
}
/* 详情部分 */
.link-box {
	background-color: #fff;
	width: 100%;
	margin: 0 auto;
}
.link-box li:nth-child(1),
.link-box li:nth-child(2),
.link-box li:nth-child(3),
.link-box li:nth-child(4) {
	border-bottom: 1px solid #eee;
}
.link-box li:nth-child(1),
.link-box li:nth-child(2),
.link-box li:nth-child(3),
.link-box li:nth-child(5),
.link-box li:nth-child(6),
.link-box li:nth-child(7) {
	border-right: 1px solid #eee;
}
.link-box ul>li {
	width: 25%;
	height: 93px;
	float: left;
	text-align: center;
	box-sizing: border-box;
}
.link-box ul>li img {
	width: 32px;
	margin-top: 20px;
}
.link-box ul>li p {
	font-size: 11px;
	line-height: 20px;
	padding-bottom: 4px;
}
/* 收货地址管理 */
.account {
	width: 100%;
	height: 40px;
	line-height: 40px;
	background: #fff;
	margin: 0 auto;
	padding: 0 16px;
	margin-top: 10px;
	box-sizing: border-box;
}
.account span {
	font-size: 14px;
	font-weight: 500;
}
.account a {
	float: right;
}
.account a p {
	font-size: 11px; 
	padding-right: 15px;
	background: url('../../images/mine/chevronRight@2x.png') no-repeat right center;
	background-size: 12px 12px;
}
/* banner 图 */
.banner-maidian {
	width: 100%;
	max-width: 750px;
	margin: 10px auto 49px;
}
.banner-maidian img {
	width: 100%;
	height: auto;
}
/* 底部 */
footer {
  padding-top: 6px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fafafa;
}
.f_ul {
  overflow: hidden;
  margin-bottom: 3px;
}
.f_ul li {
  float: left;
  width: 25%;
}
.f_ul li a {
  text-align: center;
  display: block;
}
.f_ul li a img {
  width: 24px;
  height: 24px;
}
.f_ul li a p {
  margin-top: 3px;
 font-size: 12px;
 color: #494949;
 margin-bottom: 2px;
}
.f_ul li a .f_active {
  color: #fe6600;
}
.clearfix:before,
.clearfix:after {
 content: "";
 display: block;
 clear: both;
}
.clearfix {
  zoom: 1;
}
/* userinfo-xiaomajia start*/
.header-bar {
    img {
        width: 24px;
    } 
}
.no-login {
    margin-top: 36px;
    p {
        font-size: 18px;
    }
    a {
        font-size: 14px;
    }
}
/* xiaomajia-end */
</style>

